<template>
	<view @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
		<view v-show="showBackToTop" class="back-to-top" @click="backToTop">
			UP
		</view>
		<bondmarket ref="bondmarket" v-if="PageCur=='bondmarket'" :userinfo="userinfo" :minute="minute" :fids="fids"
			:classification="classification" :default_array="default_array"></bondmarket>
		<components ref="development" v-if="PageCur=='development'" :userinfo="userinfo" :minute="minute"
			:classification="classification" :default_video="default_video"></components>
		<middle ref="middle" v-if="PageCur=='middle'" :token="token"></middle>
		<quantization ref="quantization" v-if="PageCur=='quantization'" :userinfo="userinfo" :minute="minute"
			:classification="classification" :default_chart="default_chart"></quantization>
		<database ref="database" v-if="PageCur=='database'" :userinfo="userinfo" :minute="minute"
			:classification="classification" :default_databases="default_databases"></database>
		<!-- 生产菜单 -->
		<view class="cu-bar tabbar bgcolor shadow foot" v-if="!checkstatus">
			<view class="action text" @click="NavChange" data-cur="bondmarket" v-if="PageCur == 'bondmarket'">
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/bond_markets.png"></image>
				</view>
				<view :class="PageCur=='bondmarket'?'text':'text-gray'">债市广场</view>
			</view>
			<view class="action text-gray" @click="NavChange" data-cur="bondmarket" v-else>
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/bond_market.png"></image>
				</view>
				<view :class="PageCur=='bondmarket'?'text':'text-gray'">债市广场</view>
			</view>
			<!-- <view class="action text" @click="NavChange" data-cur="development" v-if="PageCur == 'development'">
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/development.png"></image>
				</view>
				<view :class="PageCur=='development'?'text':'text-gray'">成长计划</view>
			</view>
			<view class="action text-gray" @click="NavChange" data-cur="development" v-else>
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/developments.png"></image>
				</view>
				<view :class="PageCur=='development'?'text':'text-gray'">成长计划</view>
			</view> -->
			<!-- 审核 -->
			<view class="action text-gray add-action" @click="NavChange" data-cur="middle">
				<button class="cu-btn cuIcon-add shadow"
					style="background: linear-gradient(150deg, #1FF7FD 0%, #B33BF6 49%, #FF844B 100%);opacity: 1;color: #fff;">
				</button>
			</view>

			<!-- <view class="action text" @click="NavChange" data-cur="quantization" v-if="PageCur == 'quantization'">
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/quantization.png"></image>
				</view>
				<view :class="PageCur=='quantization'?'text':'text-gray'">量化辅助</view>
			</view>
			<view class="action text-gray" @click="NavChange" data-cur="quantization" v-else>
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/quantizations.png"></image>
				</view>
				<view :class="PageCur=='quantization'?'text':'text-gray'">量化辅助</view>
			</view> -->

			<view class="action text-gray" @click="NavChange" data-cur="database" v-if="PageCur == 'database'">
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/database.png"></image>
				</view>
				<view :class="PageCur=='database'?'text':'text-gray'">债市群聊</view>
			</view>
			<view class="action text-gray" @click="NavChangeIm" data-cur="database" v-else>
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/databases.png"></image>
				</view>
				<view :class="PageCur=='database'?'text':'text-gray'">债市群聊</view>
			</view>
		</view>
		<view class="cu-bar tabbar bgcolor shadow foot" v-else>
			<view class="action text" @click="NavChange" data-cur="bondmarket" v-if="PageCur == 'bondmarket'">
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/bond_markets.png"></image>
				</view>
				<view :class="PageCur=='bondmarket'?'text':'text-gray'">债市广场</view>
			</view>
			<view class="action text-gray" @click="NavChange" data-cur="bondmarket" v-else>
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/bond_market.png"></image>
				</view>
				<view :class="PageCur=='bondmarket'?'text':'text-gray'">债市广场</view>
			</view>
			<view class="action text" @click="NavChange" data-cur="development" v-if="PageCur == 'development'">
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/development.png"></image>
				</view>
				<view :class="PageCur=='development'?'text':'text-gray'">成长计划</view>
			</view>
			<view class="action text-gray" @click="NavChange" data-cur="development" v-else>
				<view>
					<image style="width: 45rpx;height: 45rpx;" src="@/static/developments.png"></image>
				</view>
				<view :class="PageCur=='development'?'text':'text-gray'">成长计划</view>
			</view>
		</view>
		<view
			style="background-color: rgb(7, 36, 81);;width: 100rpx;height: 70rpx;z-index: 9;padding: 6px 0;position: fixed;right: 0;bottom: 21%;border-top-left-radius: 50px; border-bottom-left-radius: 50px;display: inline-flex;"
			@click="openExternalWebPage">
			<image style="width: 90rpx;height: 62rpx;z-index: 10;transform: translate(0rpx,-8rpx);"
				src="@/static/chat.png"></image>
			<view class="title"
				style="color: rgb(248, 154, 30);margin-left: 16rpx;margin-top: -12rpx;font-size: 25rpx;">群聊</view>
		</view>

		<div style="background-color: #112858;position: fixed;">
			<canvas canvas-id="canvas" :style="{ width: '375px', height: '300px'}"></canvas>
		</div>

	</view>
</template>

<script>
	import user from '@/api/user.js';
	import forum from '@/api/forum.js';
	import bondmarket from '@/pages/bondmarket/home.vue'
	import middle from '@/pages/middle/home.vue'
	import quantization from '@/pages/quantization/home.vue'
	import database from '@/pages/database/home.vue'
	import components from '@/pages/component/home.vue'
	import saveImage from '@/common/saveImage.js'
	export default {
		components: {
			bondmarket,
			middle,
			quantization,
			database,
			components
		},
		data() {
			return {
				token: '',
				PageCur: 'bondmarket',
				userinfo: [],
				buttonText: '00:10:00',
				countdown: 600,
				countdownInterval: null,
				minute: '',
				classification: [],
				fids: 0,
				channels_id: 3,
				default_array: [],
				default_databases: [],
				default_chart: [],
				default_video: {},
				category_type: 'plate',
				wen_fid: 0,
				imurl: '',
				showBackToTop: false,

				components: [{
						name: 'bondmarket'
					},
					{
						name: 'development'
					},
					{
						name: 'quantization'
					},
					{
						name: 'database'
					},
				],
				currentComponent: 'database', // 默认显示的组件
				touchStartX: 0, // 记录触摸开始时的X坐标
				touchMoveX: 0, // 记录滑动过程中的X坐标
				touchEndX: 0, // 记录触摸结束时的X坐标
				scrollDistance: 0, // 记录滑动距离
				scrollThreshold: 150, // 设置一个阈值来判断是否为滑动操作
				checkstatus: uni.getStorageSync('checkstatus'),
				url_iamges: '',
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token');
			// this.getimage()
			this.token = token
			// if (token == '') {
			// 	uni.redirectTo({
			// 		url: '/pages/login/login'
			// 	})
			// }
			this.fetchData()
			this.buttonText = `${this.countdown}`;
			// this.countdownInterval = setInterval(() => {
			// 	this.countdown--;
			// 	this.minute = this.formatTime(this.countdown)
			// 	this.buttonText = `${this.countdown}`;
			// 	if (this.countdown <= 0) {
			// 		this.countdownInterval = null;
			// 		this.buttonText = '00:10:00';
			// 		this.countdown = 600;
			// 		this.largecatalog()
			// 	}
			// }, 1000);
			this.largecatalog()
		},
		onShow() {
			this.largecatalog()
			this.fetchData()
		},
		async onShareAppMessage(e) {
			console.log(e)
			if (e.from === "button") {
				const url = uni.getStorageSync('url')
				const url_text = uni.getStorageSync('url_text').substring(0, 20);
				const url_texts = uni.getStorageSync('url_text').substring(0, 105);
				const img_url = uni.getStorageSync('img_url');
				let images = ''
				console.log(img_url, '图片路径')
				if (img_url == '') {
					images = await this.saveCanvas(url_texts)
				} else {
					images = img_url
				}
				// return {
				// 	title: url_text,
				// 	path: url,
				// 	imageUrl: images
				// }
				// 返回一个 Promise，它将在1秒后解决
				return this.delay(1000).then(() => {
					// 解决 Promise 后返回分享信息
					return {
						title: url_text,
						path: url,
						imageUrl: images
					};
				});
			}
		},
		onReachBottom(e) {
			this.$refs[this.PageCur].loadMoreData();
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.showBackToTop = true;
			} else {
				this.showBackToTop = false;
			}
		},
		methods: {
			...saveImage,
			delay(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve();
					}, time);
				});
			},
			getimage() {
				forum.getRandomShareCoverImage().then(res => {
					if (res.code == 1) {
						this.url_iamges = res.data.cover_image_url
					}
				})
			},
			handleTouchStart(e) {
				this.touchStartX = e.touches[0].clientX;
				this.touchMoveX = e.touches[0].clientX;
			},
			handleTouchMove(e) {
				this.touchMoveX = e.touches[0].clientX;
				this.scrollDistance = this.touchMoveX - this.touchStartX;
			},
			handleTouchEnd(e) {
				this.touchEndX = e.changedTouches[0].clientX;
				const totalDistance = this.touchEndX - this.touchStartX;
				// 判断滑动方向
				if (Math.abs(totalDistance) > this.scrollThreshold) {
					if (totalDistance < 0) {
						this.$refs[this.PageCur].setTabCurrent('right')
						// 左滑
						// if (this.currentComponent === 'database') {
						// 	this.currentComponent = 'bondmarket';
						// 	this.PageCur = 'bondmarket';
						// } else {
						// 	let index = this.components.findIndex(component => component.name === this.currentComponent);
						// 	if (index < this.components.length - 1) {
						// 		this.currentComponent = this.components[index + 1].name;
						// 		this.PageCur = this.components[index + 1].name;
						// 	}
						// }
						// this.largecatalog()
					} else {
						this.$refs[this.PageCur].setTabCurrent('left')
						// 右滑
						// if (this.currentComponent === 'bondmarket') {
						// 	this.currentComponent = 'database';
						// 	this.PageCur = 'database';
						// } else {
						// 	let index = this.components.findIndex(component => component.name === this.currentComponent);
						// 	if (index > 0) {
						// 		this.currentComponent = this.components[index - 1].name;
						// 		this.PageCur = this.components[index - 1].name;
						// 	}
						// }
						// this.largecatalog()
					}
				}
			},
			backToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			openExternalWebPage() {
				// const url = 'https://im.fupanai.com/user/list?user_id=' + this.userinfo.id;
				const url = 'https://im.fupanai.com/user/list?type=group&user_id=' + this.userinfo.id;
				uni.navigateTo({
					url: '/pages/index/webview?url=' + encodeURIComponent(url)
				});
			},
			fetchData() {
				if (this.token != '') {
					user.getUserDetails({
						token: this.token
					}).then(res => {
						this.userinfo = res.data
						uni.setStorageSync('userinfo', this.userinfo);
					});
				}
			},
			onPullDownRefresh() {
				this.backToTop()
				this.$refs[this.PageCur].drop_down();
				wx.stopPullDownRefresh();
			},
			largecatalog() {
				let TabCur = uni.setStorageSync('TabCur', 0);
				if (this.PageCur == 'bondmarket') {
					this.channels_id = 3
					this.category_type = 'plate'
					forum.getCategoryList({
						token: this.token,
						channels_id: this.channels_id
					}).then(res => {
						this.classification = res.data
						this.fids = res.data[0]['id']
						for (var i = 0; i < res.data.length; i++) {
							if (res.data[i]['description'] == '问答社区') {
								uni.setStorageSync('wen_fid', res.data[i]['id']);
							}
						}
						uni.setStorageSync('fid', this.fids);
						uni.setStorageSync('fid_type', 'plate');
						if (this.token != '') {
							forum.forumindex({
								token: this.token,
								category_id: res.data[0].id,
								category_type: this.category_type,
								type: 'all',
								limit: 8,
							}).then(res => {
								if (res.msg == "尚未开通会员") {
									this.default_array = []
									uni.showModal({
										title: '会员',
										content: '开通会员',
										cancelText: '取消',
										confirmText: '确定',
										success: res => {
											if (res.confirm) {
												uni.navigateTo({
													url: '/pages/membership/membership'
												})
											}
										}
									})
								} else {
									this.default_array = res.data
								}
							})
						}else{
							forum.forumPlateIndex({
								token: this.token,
								category_id: res.data[0].id,
								category_type: this.category_type,
								type: 'all',
								limit: 10,
							}).then(res => {
								this.default_array = res.data
							})
						}
					})
				} else if (this.PageCur == 'development') {
					this.channels_id = 4
					this.category_type = 'video'
					forum.getCategoryList({
						token: this.token,
						channels_id: this.channels_id
					}).then(res => {
						this.classification = res.data
						this.fids = res.data[0]['id']
						uni.setStorageSync('fid', this.fids);
						uni.setStorageSync('fid_type', 'album');
						// forum.forumindex({
						// 	token: this.token,
						// 	category_id: res.data[0].id,
						// 	category_type: this.category_type,
						// 	type: 4,
						// }).then(res => {
						// 	if(res.msg == "尚未开通会员"){
						// 		this.default_video = []
						// 		uni.showModal({
						// 			title: '会员',
						// 			content: '开通会员',
						// 			cancelText: '取消',
						// 			confirmText: '确定',
						// 			success: res => {
						// 				if (res.confirm) {
						// 					uni.navigateTo({
						// 						url: '/pages/membership/membership'
						// 					})
						// 				}else{
						// 					// uni.navigateTo({
						// 					// 	url: '/pages/index/index'
						// 					// })
						// 				}
						// 			}
						// 		})
						// 	}else{
						// 		this.default_video = res.data
						// 	}
						// })
						forum.postGetList({
							channels_id: res.data[0].id,
							page: 1,
							limit: 5,
						}).then(res => {
							if (res.code === 1) {
								this.default_video = res.data.data
							}
						})
					})
				} else if (this.PageCur == 'quantization') {
					this.channels_id = 2
					this.category_type = 'chart'
					forum.getCategoryList({
						token: this.token,
						channels_id: this.channels_id
					}).then(res => {
						this.classification = res.data
						this.fids = res.data[0]['id']
						uni.setStorageSync('fid', this.fids);
						uni.setStorageSync('fid_type', 'chart_parent');
						// forum.forumindex({
						// 	token: this.token,
						// 	category_id: res.data[0].id,
						// 	category_type: this.category_type,
						// 	type: 4,
						// }).then(res => {
						// 	if(res.msg == "尚未开通会员"){
						// 		this.default_chart = []
						// 		uni.showModal({
						// 			title: '会员',
						// 			content: '开通会员',
						// 			cancelText: '取消',
						// 			confirmText: '确定',
						// 			success: res => {
						// 				if (res.confirm) {
						// 					uni.navigateTo({
						// 						url: '/pages/membership/membership'
						// 					})
						// 				}else{
						// 					// uni.navigateTo({
						// 					// 	url: '/pages/index/index'
						// 					// })
						// 				}
						// 			}
						// 		})
						// 	}else{
						// 		this.default_chart = res.data
						// 	}
						// })
						forum.postGetList({
							channels_id: res.data[0].id,
							page: 1,
							limit: 5,
						}).then(res => {
							if (res.code === 1) {
								this.default_chart = res.data.data
							}
						})
					})
				} else if (this.PageCur == 'database') {
					this.channels_id = 7
					this.category_type = 'investment'
					forum.getCategoryList({
						token: this.token,
						channels_id: this.channels_id
					}).then(res => {
						this.classification = res.data
						this.fids = res.data[0]['id']
						uni.setStorageSync('fid', this.fids);
						uni.setStorageSync('fid_type', 'investment_category');
						// forum.forumindex({
						// 	token: this.token,
						// 	category_id: res.data[0].id,
						// 	category_type: this.category_type,
						// 	type: 4,
						// }).then(res => {
						// 	if(res.msg == "尚未开通会员"){
						// 		this.default_databases = []
						// 		uni.showModal({
						// 			title: '会员',
						// 			content: '开通会员',
						// 			cancelText: '取消',
						// 			confirmText: '确定',
						// 			success: res => {
						// 				if (res.confirm) {
						// 					uni.navigateTo({
						// 						url: '/pages/membership/membership'
						// 					})
						// 				}else{
						// 					// uni.navigateTo({
						// 					// 	url: '/pages/index/index'
						// 					// })
						// 				}
						// 			}
						// 		})
						// 	}else{
						// 		this.default_databases = res.data
						// 	}
						// })
						forum.postGetList({
							channels_id: res.data[0].id,
							page: 1,
							limit: 5,
						}).then(res => {
							if (res.code === 1) {
								this.default_databases = res.data.data
							}
						})
					})
				}
			},
			formatTime(seconds) {
				const minutes = Math.floor(seconds / 60);
				const remainingSeconds = seconds % 60;
				const formattedMinutes = String(minutes).padStart(2, '0');
				const formattedSeconds = String(remainingSeconds).padStart(2, '0');
				const formattedTime = `00:${formattedMinutes}:${formattedSeconds}`;
				return formattedTime;
			},
			NavChange(e) {
				this.PageCur = e.currentTarget.dataset.cur
				this.largecatalog()
			},
			NavChangeIm(e) {
				forum.getWebConfig().then(res => {
					if (res.code == 1) {
						const url = 'https://im.fupanai.com/chat/groupIndex?user_id=' + this.userinfo.id + '&group_id=' + res.data.top_im_user_chat_groups_id;
						uni.navigateTo({
							url: '/pages/index/webview?url=' + encodeURIComponent(url)
						});
					}
				})				
			},
		}
	}
</script>

<style>
	.text {
		color: #1eebe6;
		margin-left: -1rpx;
	}

	.bgcolor {
		background-color: #0d4283;
	}

	.back-to-top {
		height: 60rpx;
		width: 60rpx;
		background-color: #ffffff;
		text-align: center;
		line-height: 40px;
		color: #1989fa;
		position: fixed;
		bottom: 160rpx;
		right: 5rpx;
		z-index: 9999;
	}
</style>